<extend name="Base:common" />
<block name="style">
    <css href="__CSS__/index.css" />
    <style>
     body{
         background-image: url('__IMG__/images_main_background_1.png');
     }
    </style>
</block>
<block name="script">
    <script>
     $(function(){
         $('.menu ul li:first-child').addClass('active');
         $('.detail ul:first-child').show();
         $('.menu ul li').click(function(){
             var id = $(this).data('id');
             $(this).addClass('active')
                    .siblings().removeClass('active');
             $('.detail').find('ul[data-id=' + id +']')
                .show()
                .siblings().hide();
         })
     })
    </script>
</block>
<block name="header">
    <header class="page default">
        <i class="abs back"></i>
        <h2>古法e</h2>
        <i class="abs info"></i>
    </header>
</block>
<block name="body">
    <section class="search-button page">
        <div class="search-box">
            <i class="search"></i>
            <input name="" type="search" value="" placeholder="常见疾病搜索" />
        </div>
    </section>
    <section class="classify">
        <div class="menu">
            <ul>
                <volist name="list" id="vo">
                    <li data-id="{$vo.id}">{$vo.name}</li>
                </volist>
            </ul>
        </div>
        <div class="detail">
            <volist name="list" id="vo">
                <ul data-id="{$vo.id}" class="hide">
                    <volist name="vo.child" id="vv">
                        <li data="{$vv.id}">
                            <a href="{:U('sick', array('id' => $vv['id']))}">
                                <p class="title">{$vv.name}</p>
                                <p class="desc">{$vv.details}</p>
                            </a>
                        </li>
                    </volist>
                </ul>
            </volist>
        </div>
    </section>
</block>
